<template>
  <view class="page page-grey page-activity-list">
    <view class="page-content">
      <!-- 页签 -->
      <view class="page-tab">
        <fui-tabs :tabs="tabs" @change="handleChangeTab" background="rgba(0,0,0,0)" size="32" color='#666666' sliderRadius=-1 :center='true' fontWeight='bold' selectedSize='32' selectedColor='var(--fui-color-primary)' scale='1' sliderHeight='8' selectedFontWeight='bold' bottom=3></fui-tabs>
      </view>
      <!-- 列表页 -->
			<view class="activity-list">
				<view class="activity-item" v-for="item in listData" :key="item.id">
					<view class="activity-item-content">
            <view class="activity-image">
              <image class="activity-thumb" :src="item.cover" mode="aspectFill"></image>
              <fui-tag :text="ACTIVITY_APPLY_STATUS[item.applyStatusCode].name" :padding="['10rpx', '15rpx']" :background="ACTIVITY_APPLY_STATUS[item.applyStatusCode].background" :color="ACTIVITY_APPLY_STATUS[item.applyStatusCode].color"></fui-tag>
            </view>
            <view class="activity-info">
              <view class="activity-info-titile">{{ item.name }}</view>
              <view class="activity-info-text">
                <fui-text class="activity-info-subtitle" text="活动类型" size="24" color="#999"></fui-text>
                <fui-text :text="ACTIVITY_DISCOUNT_TYPE[item.discountType].name" size="24" color="#333"></fui-text>
              </view>
              <view class="activity-info-text">
                <fui-text class="activity-info-subtitle" text="活动时间" size="24" color="#999"></fui-text>
                <fui-text :text="utils.dateFormatter(item.startTime, 'y/m/d', 2, true)" size="24" color="#333"></fui-text>
                <fui-text text="~" size="24" color="#333"></fui-text>
                <fui-text :text="utils.dateFormatter(item.endTime, 'y/m/d', 2, true)" size="24" color="#333"></fui-text>
              </view>
              <view class="activity-info-text">
                <fui-text class="activity-info-subtitle" text="报名时间" size="24" color="#999"></fui-text>
                <fui-text :text="utils.dateFormatter(item.applyStartTime, 'y/m/d', 2, true)" size="24" color="#333"></fui-text>
                <fui-text text="~" size="24" color="#333"></fui-text>
                <fui-text :text="utils.dateFormatter(item.applyEndTime, 'y/m/d', 2, true)" size="24" color="#333"></fui-text>
              </view>
            </view>
          </view>
          <view class="activity-info-tools">
            <fui-button class="ui-btn-primary_plain" text="管理商品" width="126rpx" height="48rpx" radius="8rpx" size="24" @click="handleToGoods(item)"></fui-button>
          </view>
				</view>
			</view>
      <fui-loadmore :state="moreState"></fui-loadmore>
    </view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue'
import { onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
import { useStore } from 'vuex'
import { ACTIVITY_SIGN_STATUS, ACTIVITY_DISCOUNT_TYPE, ACTIVITY_APPLY_STATUS } from './consts'
import utils from '@/components/firstui/fui-utils'
import activityApi from '@/api/activity/joinin'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

onShow(() => {
  getActivityList()
})

// 标签页
const tabs = ref(Object.values(ACTIVITY_SIGN_STATUS))
const handleChangeTab = (e) => {
  queryParams.value.pageNo = 1
  queryParams.value.status = e.code
  getActivityList()
}

// 获取活动列表
const moreState = ref(1)
const listData = ref([])
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  status: 61
})
const getActivityList = (() => {
  uni.stopPullDownRefresh()
  try {
    queryParams.value.supplierId = store.getters.companyId
    activityApi.getRecordList(queryParams.value).then((res) => {
      modal.closeLoading()
      if (res.code == 0) {
        const nowTime = new Date().getTime()
        const newData = res.data && res.data.list ? res.data.list : []
        newData.forEach(item => {
          item.applyStatusCode = nowTime < item.applyEndTime ? 1 : 2
          if (queryParams.value.status == 63) {
            item.applyStatusCode = 3
          }
        })
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch(err) {
    modal.closeLoading()
  }
})

// 跳转商品列表
const handleToGoods = (row) => {
  tab.navigateTo(`/pages/activity/joinin/goods?activityId=${row.id}&recordId=${row.recordId}&applyEndTime=${row.applyEndTime}&activityStatus=${queryParams.value.status}`)
}

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getActivityList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    modal.loading('加载中...');
    moreState.value = 2;
    queryParams.value.pageNo++
    getActivityList()
  }
})
</script>

<style lang="scss" scoped>
.page-activity-list {
  .page-content {
    padding: 0 36rpx;
  }
  .page-tab {
    :deep(.fui-tabs__scrollbox) {
      width: fit-content;
    }

    :deep(.fui-tabs__line-short) {
      width: 64rpx !important;
    }

    :deep(.fui-tabs__item) {
      padding-left: 5rpx;
      padding-right: 72rpx;
    }
  }

  .activity-list {
    width: 100%;
    padding: 24rpx 0;
		.activity-item {
			border-radius: 16rpx;
      background-color: #fff;
      margin-bottom: 24rpx;
      padding: 24rpx;
      .activity-item-content {
        position: relative;
        min-height: 160rpx;
        overflow: hidden;
        padding-left: 224rpx;
			  .activity-image {
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -80rpx;
          .activity-thumb {
            width: 200rpx;
            height: 160rpx;
            overflow: hidden;
            border-radius: 16rpx;
          }
          .fui-tag__wrap {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            border-radius: 0 !important;
            border-bottom-right-radius: 8rpx !important;
          }
        }
        .activity-info-titile {
          margin-bottom: 10rpx;
          font-size: 26rpx;
          color: #333;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .activity-info-subtitle {
          margin-right: 10rpx;
        }
			}
      .activity-info-tools {
        display: flex;
        justify-content: flex-end;
        margin-top: 16rpx;
      }
		}
  }
}
</style>